<template lang="html">
  <div ref="box">
    <p>提交中<span class="dot">...</span></p>
  </div>
</template>

<script>
// timerPromisefy
function timerPromisefy (delay) {
  return new Promise (function (resolve) {
    setTimeout(function () {
      resolve(delay);
    }, delay);
  })
}

export default {
  data () {
    return {

    }
  },
  methods: {
    allFn () {
      var startDate = Date.now();
      Promise.all([
        timerPromisefy(1),
        timerPromisefy(32),
        timerPromisefy(64)
      ]).then(function (values) {
        console.log(Date.now() - startDate + 'ms')
        console.log(values);
      })
    },
    raceFn () {
      var startDate = Date.now();
      Promise.race([
        timerPromisefy(1),
        timerPromisefy(32),
        timerPromisefy(64)
      ]).then(function (values) {
        console.log(Date.now() - startDate + 'ms')
        console.log(values);
      })
    }
  },
  created () {
    // this.allFn();
    this.raceFn();
  }
}
</script>

<style lang="scss" scoped>
.dot {
  display: inline-block;
  height: 1em;
  line-height: 1;
  text-align: left;
  vertical-align: -.25em;
  overflow: hidden;
  &::before {
    display: block;
    content: '...\A..\A.';
    white-space: pre-wrap;
    animation: dot 3s infinite step-start both;
  }
  @keyframes dot {
    33% { transform: translateY(-2em); }
    66% { transform: translateY(-1em); }
  }
}
</style>
